<template>
  <div class="routes-page">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/" class="back-button me-3">
        <i class="bi bi-arrow-left"></i>
      </router-link>
      <h5 class="mb-0">功能导航</h5>
    </div>

    <!-- 路由列表 -->
    <div class="routes-container">
      <div v-for="(group, index) in routeGroups" :key="index" class="route-group">
        <div class="group-title">{{ group.title }}</div>
        <div class="route-list">
          <router-link 
            v-for="route in group.routes" 
            :key="route.path"
            :to="route.path"
            class="route-item"
          >
            <div class="route-icon">
              <i :class="getRouteIcon(route)"></i>
            </div>
            <div class="route-content">
              <div class="route-name">{{ getRouteName(route) }}</div>
              <div class="route-desc">{{ route.meta?.desc || getRouteDesc(route) }}</div>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router'

export default {
  name: 'RoutesView',
  data() {
    return {
      routeGroups: this.generateRouteGroups()
    }
  },
  methods: {
    generateRouteGroups() {
      const routes = router.options.routes
      const groups = {
        english: {
          title: '英语学习',
          routes: []
        },
        ai: {
          title: 'AI 辅助学习',
          routes: []
        },
        tools: {
          title: '学习工具',
          routes: []
        }
      }

      routes.forEach(route => {
        if (route.path.startsWith('/english/ai')) {
          groups.ai.routes.push(route)
        } else if (route.path.startsWith('/english')) {
          groups.english.routes.push(route)
        } else if (['/qa', '/study-statistics', '/study-report'].includes(route.path)) {
          groups.tools.routes.push(route)
        }
      })

      return Object.values(groups).filter(group => group.routes.length > 0)
    },
    getRouteIcon(route) {
      const iconMap = {
        // 英语学习
        'EnglishExam': 'bi bi-journal-text',
        'EnglishReadingText': 'bi bi-book',
        'translation': 'bi bi-translate',
        'EnglishCloze': 'bi bi-pencil-square',
        'vocabulary': 'bi bi-card-text',
        'SentencePractice': 'bi bi-chat-quote',
        // AI 辅助
        'AIExercise': 'bi bi-robot',
        'AIReading': 'bi bi-journal-text',
        'AITranslation': 'bi bi-translate',
        // 工具
        'qa': 'bi bi-chat-dots',
        'study-statistics': 'bi bi-graph-up',
        'study-report': 'bi bi-file-text'
      }
      return iconMap[route.name] || 'bi bi-app'
    },
    getRouteName(route) {
      const nameMap = {
        // 英语学习
        'EnglishExam': '英语考试',
        'EnglishReadingText': '阅读理解',
        'translation': '翻译练习',
        'EnglishCloze': '完形填空',
        'vocabulary': '词汇学习',
        'SentencePractice': '句子练习',
        // AI 辅助
        'AIExercise': 'AI 练习',
        'AIReading': 'AI 阅读',
        'AITranslation': 'AI 翻译',
        // 工具
        'qa': '在线答疑',
        'study-statistics': '学习统计',
        'study-report': '学习报告'
      }
      return nameMap[route.name] || route.meta?.title || route.name
    },
    getRouteDesc(route) {
      const descMap = {
        // 英语学习
        'EnglishExam': '模拟考试练习',
        'EnglishReadingText': '阅读文章练习',
        'translation': '英语翻译练习',
        'EnglishCloze': '完形填空练习',
        'vocabulary': '词汇记忆练习',
        'SentencePractice': '句子翻译练习',
        // AI 辅助
        'AIExercise': '智能练习系统',
        'AIReading': '智能阅读训练',
        'AITranslation': '智能翻译练习',
        // 工具
        'qa': '问题解答互助',
        'study-statistics': '学习数据分析',
        'study-report': '每周学习报告'
      }
      return descMap[route.name] || ''
    }
  }
}
</script>

<style scoped>
.routes-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background: linear-gradient(135deg, #00b8a9, #00a19a);
  color: white;
  padding: 15px;
  position: relative;
}

.back-button {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

.routes-container {
  padding: 15px;
}

.route-group {
  margin-bottom: 20px;
}

.group-title {
  font-size: 0.9rem;
  color: #666;
  padding: 10px 5px;
}

.route-list {
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.route-item {
  display: flex;
  align-items: center;
  padding: 15px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.route-item:last-child {
  border-bottom: none;
}

.route-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,184,169,0.1);
  color: #00b8a9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 1.2rem;
}

.route-content {
  flex: 1;
}

.route-name {
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.route-desc {
  font-size: 0.8rem;
  color: #999;
}
</style> 